<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实时日志</title>
    <!-- jquery -->
    <!-- <script th:src="@{/js/jquery-1.9.1.min.js}"></script> -->
</head>
<body style="background-color: #2f3248">
<style>
    .log-container {
        font-family: monospace; /* 使用等宽字体，类似于控制台 */
        white-space: pre-wrap; /* 保留空格和换行符 */
        word-wrap: break-word; /* 长单词或URL会自动换行 */
        line-height: 1.5; /* 行间距 */
        background-color: #2d2d2d; /* 深色背景 */
        color: #ffffff; /* 白色文字 */
        padding: 10px;
        overflow-y: auto; /* 垂直滚动条 */
        border-radius: 5px; /* 圆角边框 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    }
    button{
        margin: 15rpx;
        border-radius: 5px; /* 圆角边框 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    bem-cc{

    }
    .log-level {
        padding: 2px 5px;
        border-radius: 3px;
        margin-right: 5px;
    }

    .debug { color: #3399ff; background-color: #001a33; }
    .info { color: #33cc33; background-color: #003300; }
    .warn { color: #ffcc00; background-color: #333300; }
    .error { color: #ff3333; background-color: #330000; }

    .class-name { color: #298a8a; font-weight: bold; }

    .log-title {
        margin-top: 10px !important;
        text-align: center;
        font-size: 1em;
        color: #d9dcfc;
        background-color: #2d2d2d;
        padding: 10px;
        margin-bottom: 10px; /* 与日志显示区之间留出一些空间 */
        border-radius: 5px; /* 圆角边框 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    }
</style>

<!-- 标题 -->
<h6 class="log-title">实现的日志在线监听</h6>

<!-- 显示区 -->
<div class="log-container" id="loggingText" contenteditable="true"
     style="height:550px"  ></div>

<!-- 操作栏 -->
<div style="height: auto;text-align: center; margin-top: 10px; background-color: #2d2d2d;padding: 20px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);">
    <button onclick="clearLog()" style="color: green; height: 35px;">清屏</button>
    <button onclick="scrollToBottom()" style="color: green; height: 35px;">滚动至底部</button>
    <button onclick="toggleAutoScroll()" style="color: green; height: 35px;">开启自动滚动</button>
</div>

<script>
    // websocket对象
    let websocket = null;
    let loggingAutoBottom = false;

    // 动态获取当前页面所在的服务器IP地址
    function getServerIp() {
        var currentUrl = new URL(window.location.href);
        console.log("地址",currentUrl)
        console.log("本地地址",currentUrl.host)
        return currentUrl.host;
    }



    // 判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://"+getServerIp()+"/websocket/logging");
    } else {
        console.error("不支持WebSocket");
    }

    // 连接发生错误的回调方法
    websocket.onerror = function (e) {
        console.error("WebSocket连接发生错误");
    };

    // 连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功");
    };

    // 接收到消息的回调方法
    websocket.onmessage = function (event) {
        if (event.data) {
            // 日志内容
            const loggingText = document.getElementById("loggingText");
            loggingText.innerHTML += event.data;

            // 是否开启自动底部
            if (loggingAutoBottom) {
                // 滚动条自动到最底部
                loggingText.scrollTop = loggingText.scrollHeight;
            }
        }
    };

    // 连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    };

    // 清屏按钮点击事件
    function clearLog() {
        const loggingText = document.getElementById("loggingText");
        loggingText.innerHTML = "";
    }

    // 滚动至底部按钮点击事件
    function scrollToBottom() {
        const loggingText = document.getElementById("loggingText");
        loggingText.scrollTop = loggingText.scrollHeight;
    }

    // 开启/关闭自动滚动按钮点击事件
    function toggleAutoScroll() {
        loggingAutoBottom = !loggingAutoBottom;
        const button = document.querySelector('button[οnclick="toggleAutoScroll()"]');
        button.textContent = loggingAutoBottom ? "关闭自动滚动" : "开启自动滚动";
    }
</script>
</body>
</html>
